<template>
  <div>
    <van-nav-bar
      title="发布"
      left-text="返回"
      left-arrow
      @click-left="leftClick"
      fixed
      placeholder
    />

    <van-form @submit="onSubmit">
      <van-field
        readonly
        v-model="userId"
        name="userId"
        label="用户ID"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        readonly
        clickable
        name="cateId"
        :value="value"
        label="分类ID"
        placeholder="点击选择分类ID"
        @click="showPicker = true"
      >
      </van-field>
      <van-field
        v-model="needsPrice"
        type="number"
        name="needsPrice"
        label="大约价格"
        placeholder="大约价格"
        :rules="[{ required: true, message: '请填写大约价格' }]"
      />
      <van-field
        v-model="needsXm"
        name="needsXm"
        label="联系人"
        placeholder="联系人"
        :rules="[{ required: true, message: '请填写联系人' }]"
      />
      <van-field
        v-model="needsQq"
        name="needsQq"
        label="QQ号"
        placeholder="QQ号"
        :rules="[{ required: true, message: '请填写QQ号' }]"
      />
      <van-field
        v-model="needsWx"
        name="needsWx"
        label="微信号"
        placeholder="微信号"
        :rules="[{ required: true, message: '请填写微信号' }]"
      />
      <van-field
        clearable
        show-word-limit
        type="textarea"
        maxlength="350"
        v-model="needsContent"
        name="needsContent"
        label="求购描述"
        placeholder="求购描述"
        :rules="[{ required: true, message: '请填写求购描述' }]"
      />
      <van-field
        v-model="needsAddress"
        name="needsAddress"
        label="地址"
        placeholder="地址"
        :rules="[{ required: true, message: '请填写地址' }]"
      />

      <van-field name="needsStatus" label="状态">
        <template #input>
          <van-radio-group v-model="needsStatus" direction="horizontal">
            <van-radio name="0">下架</van-radio>
            <van-radio name="1">上架</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  name: "ToutiaoQiugou",

  components: {},

  directives: {},

  data() {
    return {
      userId: "",
      showPicker: false,
      cateList: [],
      columns: [],
      value: "",
      needsStatus: "1",
      needsXm: "",
      needsAddress: "",
      needsContent: "",
      needsWx: "",
      needsQq: "",
      needsPrice: "",
    };
  },

  mounted() {},
  created() {
    this.userId = localStorage.getItem("id");
    this.getCateList();
  },
  methods: {
    leftClick() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      //console.log(values);
      let that = this;
      $.ajax({
        type: "post",
        url: "http://121.4.40.144/api/needs/",
        data: JSON.stringify(values),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          //console.log(res);
          if (res.code !== 200) {
            Toast("提交失败");
          } else {
            Toast("提交成功");
            localStorage.removeItem("needsList");
            that.$router.push({ name: "needs" });
            that.needsXm = "";
            that.needsAddress = "";
            that.needsContent = "";
            that.needsWx = "";
            that.needsQq = "";
            that.needsPrice = "";
          }
        },
      });
    },
    onConfirm(value) {
      for (let i = 0; i < this.cateList.length; i++) {
        if (this.cateList[i].cateName === value) {
          this.value = this.cateList[i].cateId;
        }
      }
      this.showPicker = false;
    },
    async getCateList() {
      const { data: res } = await this.$http.get("/api/cate/all");
      //console.log(res);
      this.cateList = res.data;
      let arr = [];
      for (let i = 0; i < res.data.length; i++) {
        let objarr = res.data[i].cateName;
        arr.push(objarr);
      }
      this.columns = arr;
    },
  },
};
</script>

<style lang="less" scoped>
</style>